<template>
  <view class="content">
    <tui-navigation-bar splitLine @init="initNavigation" title="质量检查">
      <view class="tui-header-icon" :style="{ marginTop: top + 'px' }"
        style="display: flex;justify-content: space-between;">
        <tui-icon name="arrowleft" color='#000' @click="back"></tui-icon>
        <tui-icon v-if='approval===true' name="plus" color='#000' @click="newQuality"></tui-icon>
      </view>
    </tui-navigation-bar>
    <!-- 导航栏占位符，防止内容塌陷 -->
    <view :style="{ height: navBarHeight+'px' }"></view>
    <tui-searchbar radius='40rpx' placeholder="请输入检查编号、部位或情况" @search="search" @clear="clear"></tui-searchbar>
    <tui-tab :tabs="tabs" @change="change" :current='currentTabIndex'></tui-tab>
    <scroll-view scroll-y="true" class="scroll">
      <ul v-for="(item,index) in tabList" :key='index' class="card"
        @click="checkOrRatify(item.id,item.isSubmit,approval)">
        <li class='lis'><text class='title'>【检查编号】</text><text class="titleText">{{item.qualityCode}}</text></li>
        <li class='lis'><text class='title'>【检查分类】</text><text class="titleText">{{item.qualityType}}</text></li>
        <li class='lis'><text class='title'>【检查部位】</text><text class="titleText">{{item.qualityPart}}</text></li>
        <li class='lis'><text class='title'>【检查单位】</text><text class="titleText">{{item.qualityUnitsId}}</text></li>
        <li class='lis'><text class='title'>【检查情况】</text><text class="titleText">{{item.qualityDescription}}</text></li>
        <li class='lis'><text class='title'>【检查时间】</text><text class="titleText">{{item.qualityTime}}</text></li>
        <view :class="['state', getStateClass(item.isPass)]">{{showIspass(item)}}</view>
      </ul>
    </scroll-view>
  </view>
</template>

<script setup lang='ts'>
  import {
    ref
  } from 'vue';
  import {
    onShow
  } from '@dcloudio/uni-app'
  import {
    getQualityList
  } from '@/apis/quality.js';
  const projectId = uni.getStorageSync("projectInfo").id
  const top = ref(0)
  const navBarHeight = uni.getStorageSync('systemInfo').statusBarHeight + 46
  //是否拥有审批权限
  const approval=uni.getStorageSync('userRoleInProject').perms['mobile:quality:check']
  const tabs = ref(['合格', '不合格'])
  const tabList = ref([])
  const list: any = ref([])
  // 当前的标签索引
  const currentTabIndex = ref(0);
  //更改标签内容
  const change = (e) => {
    currentTabIndex.value = e.index;
    tabList.value = []
    if (currentTabIndex.value === 0) {
      tabList.value.push(...list.value.filter(e => e.isPass === '合格'))
    } else {
      tabList.value.push(...list.value.filter(e => e.isPass === '不合格'))
    }
  }

  const initNavigation = (e) => {
    top.value = e.top;
  }

  onShow(() => {
    tabList.value = []
    getQualityList(projectId, 1, -1).then(res => {
      list.value = res.data.data
      if (currentTabIndex.value === 0) {
        tabList.value.push(...list.value.filter(e => e.isPass === '合格'))
      } else {
        tabList.value.push(...list.value.filter(e => e.isPass === '不合格'))
      }
    })
  })



  const showIspass=(item)=>{
  	if(item.isSubmit===1 && item.isPass==='不合格' && item.isFinishRectification===0){
  		return '整改中'
  	}else if(item.isSubmit===0 && item.isPass==='不合格'){
  		return '未整改'
  	}else if(item.isFinishRectification===1 && item.isPass==='不合格'){
  		return '已整改'
  	}else{
  		return '合格'
  	}
  }

  const search = ({value}) => {
    tabList.value = tabList.value.filter(item =>
      item.qualityCode.toString().includes(value) ||
      item.qualityPart.includes(value) || 
      item.qualityDescription.includes(value)
    )
  }

  const clear = () => {
    if (currentTabIndex.value === 0) {
      tabList.value = list.value.filter(item => item.isPass === '合格');
    } else {
      tabList.value = list.value.filter(item => item.isPass === '不合格');
    }
  }

  //查看质量检查
  const checkOrRatify = (id, isSubmit, comment) => {
    console.log(id, isSubmit, comment);
    uni.navigateTo({
      url: `/pages/qualityCheck/qualityCheckMsg?id=${id}&isSubmit=${isSubmit}&approval=${approval}&comment=${comment}`
    })
  }

  //新增检验批
  const newQuality = () => {
    uni.navigateTo({
      url: '/pages/qualityCheck/newQualityCheck'
    })
  }

  const back = () => {
    uni.navigateBack()
  }

  //动态绑定样式
  const getStateClass = (state) => {
    switch (state) {
      case '审批不通过':
        return 'state-fail';
      case '审批通过':
        return 'state-pass';
      case '审批中':
        return 'state-progress';
      default:
        return '';
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    background-color: #fafafa;

    .tui-header-icon {
      width: 100%;
      position: fixed;
      top: 0;
      padding: 0 12rpx;
      display: flex;
      align-items: center;
      height: 32px;
      transform: translateZ(0);
      z-index: 99999;
      box-sizing: border-box;
    }

    .tui-header-icon-right {
      width: 100%;
      position: fixed;
      top: 0;
      right: 0;
      padding: 0 12rpx;
      display: flex;
      align-items: center;
      height: 32px;
      transform: translateZ(0);
      z-index: 99999;
      box-sizing: border-box;
    }

    .scroll {
      background-color: #fafafa;
      box-sizing: border-box;

      .card {
        width: 95%;
        box-sizing: border-box;
        margin: 20rpx auto;
        padding: 15rpx;
        position: relative;
        border-radius: 20rpx;
        background-color: #ffffff;
        flex-direction: column;

        .lis {
          display: flex;
          flex: 1;
          align-items: center;
          margin: 10rpx 0;
          font-size: 14px;
          color: #7f7f7f;

          .title {
            margin-right: 20rpx;
          }

          .titleText {}
        }

        .state {
          position: absolute;
          padding: 0 20rpx;
          text-align: center;
          line-height: 30px;
          border: 1px solid #ff6937;
          right: 10px;
          top: 10px;
          color: #ff6937;

          &.state-fail {
            color: #ff4d4f;
            border-color: #ff4d4f;
          }

          &.state-pass {
            color: #3086ff;
            border-color: #3086ff;
          }

          &.state-progress {
            color: #faad14;
            border-color: #faad14;
          }

          &.state-pending {
            color: #d9d9d9;
            border-color: #d9d9d9;
          }
        }
      }
    }
  }
</style>